<template>
  <div class="com-container">
    <div class="title-contain" :style="titleFont">
      <span>{{ '▎ ' + currentTitle }}</span>
      <span
        :style="titleFont"
        class="iconfont title-icon"
        @click="showSelect = !showSelect"
      >&#xe6eb;</span>
      <div
        v-show="showSelect"
        class="select-contain"
        :style="[backGround,marginLeft]"
      >
        <template v-for="item in selectType">
          <div
            :key="item.key"
            class="item-select"
            @click="handleSelect(item.key)"
          >
            {{ item.text }}
          </div>
        </template>
      </div>
    </div>
    <div ref="trend" class="com-chart" />
  </div>
</template>
<script>
// import { getTrend } from '../api/sys'
import { mapState } from 'vuex'
import { getThemeValue } from '../util/theme'
export default {
  data() {
    return {
      trendChart: null,
      allData: null,
      showSelect: false,
      currentChoice: 'map',
      titleFontSize: 0,
      timerId: null,
      currentIndex: 0
    }
  },
  computed: {
    selectType() {
      if (!this.allData) {
        return []
      } else {
        return this.allData.type.filter(item => {
          return item.key !== this.currentChoice
        })
      }
    },
    currentTitle() {
      if (!this.allData) {
        return ''
      } else {
        return this.allData[this.currentChoice].title
      }
    },
    titleFont() {
      return {
        fontSize: this.titleFontSize * 1.2 + 'px',
        color: getThemeValue(this.theme).titleColor
      }
    },
    marginLeft() {
      return {
        marginLeft: this.titleFontSize + 'px'
      }
    },
    backGround() {
      return {
        backgroundColor: this.theme === 'vintage' ? '#fff' : '#222733'
      }
    },
    ...mapState(['theme'])
  },
  watch: {
    theme() {
      this.trendChart.dispose() // 销毁当前的图表
      this.initChart() // 更换主题后重新渲染
      this.screenAdaptation() // 屏幕适配
      this.upDataChart() // 更新图表数据
    }
  },
  created() {
    this.$socket.registerCallBack('trendData', this.getData)
  },
  mounted() {
    this.initChart()
    this.$socket.send({
      action: 'getData',
      socketType: 'trendData',
      chartName: 'trend',
      value: ''
    })
    // this.getData()
    window.addEventListener('resize', this.screenAdaptation)
    this.screenAdaptation()
  },
  destroyed() {
    window.removeEventListener('resize', this.screenAdaptation)
    this.$socket.unRegisterCallBack('trendData', this.getData)
    clearInterval(this.timerId)
  },
  methods: {
    initChart() {
      this.trendChart = this.$eCharts.init(this.$refs.trend, this.theme)
      const initOption = {
        grid: {
          left: '3%',
          top: '35%',
          right: '4%',
          bottom: '1%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          left: '3%',
          top: '15%',
          icon: 'circle'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false // 是否需要留间隙
        },
        yAxis: {
          type: 'value'
        }
      }

      this.trendChart.setOption(initOption)

      this.trendChart.on('mouseover', () => {
        clearInterval(this.timerId)
      })
      this.trendChart.on('mouseout', () => {
        this.startSetInterval()
      })
    },
    async getData(res) {
      this.allData = res
      this.upDataChart()
      this.startSetInterval()
    },
    upDataChart() {
      // 半透明的颜色值
      const colorArr1 = [
        'rgba(11, 168, 44, 0.5)',
        'rgba(44, 110, 255, 0.5)',
        'rgba(22, 242, 217, 0.5)',
        'rgba(254, 33, 30, 0.5)',
        'rgba(250, 105, 0, 0.5)'
      ]
      // 全透明的颜色值
      const colorArr2 = [
        'rgba(11, 168, 44, 0)',
        'rgba(44, 110, 255, 0)',
        'rgba(22, 242, 217, 0)',
        'rgba(254, 33, 30, 0)',
        'rgba(250, 105, 0, 0)'
      ]
      const monthArray = this.allData.common.month
      const valueArray = this.allData[this.currentChoice].data
      const seriesArray = valueArray.map((item, index) => {
        return {
          type: 'line',
          name: item.name,
          data: item.data,
          stack: this.currentChoice,
          areaStyle: {
            color: new this.$eCharts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: colorArr1[index]
              },
              {
                offset: 1,
                color: colorArr2[index]
              }
            ])
          }
        }
      })
      const legendArray = valueArray.map(item => {
        return item.name
      })
      const dataOption = {
        legend: {
          data: legendArray
        },
        xAxis: {
          data: monthArray
        },
        series: seriesArray
      }
      this.trendChart.setOption(dataOption)

      this.trendChart.dispatchAction({ // 使用dispatchAction
        type: 'showTip', // tooltip为axis属性 使用 showTip 绑定tooltip
        seriesIndex: 0, // seriesIndex  series的第几组
        dataIndex: this.currentIndex // dataIndex  固定位置
      })
      this.startSetInterval()
    },
    screenAdaptation() {
      this.titleFontSize = this.$refs.trend.offsetWidth / 100 * 3.6
      const screenOption = {
        legend: {
          itemWidth: this.titleFontSize / 1.2,
          itemHeight: this.titleFontSize / 1.2,
          itemGap: this.titleFontSize / 1.2,
          textStyle: {
            fontSize: this.titleFontSize / 2
          }
        }
      }
      this.trendChart.setOption(screenOption)
      this.trendChart.resize()
    },
    handleSelect(key) {
      this.currentChoice = key
      this.upDataChart()
      this.showSelect = false
    },
    startSetInterval() {
      if (this.timerId) {
        clearInterval(this.timerId)
      }
      const monthLength = this.allData.common.month.length
      this.timerId = setInterval(() => {
        this.currentIndex++
        if (this.currentIndex > monthLength - 1) {
          this.currentIndex = 0
        }
        // this.currentChoice = keys[this.currentIndex]
        this.upDataChart()
      }, 1500)
    }
  }
}
</script>

<style lang="less" scoped>
.title-contain{
  position: absolute;
  z-index: 10;
  margin: 20px;
  color: #fff;
  font-weight: 600;
  .title-icon{
    cursor: pointer;
    margin-left: 10px;
  }
  .select-contain{
    margin-top: 6px;
    background-color: #222733;
    .item-select{
      font-weight: 600;
      cursor: pointer;
      margin-bottom: 6px;
    }
  }
}
</style>
